<template>
  <px-dialog v-model="faultVisible" title="故障报警列表" width="900px" destroy-on-close append-to-body @close="handleCancel">
    <px-scrollbar class="view-equip-detail">
      <px-table :data="tableData" class="equip-table" size="small" max-height="700" border>
        <px-table-column
          v-for="(item, index) in tableColumns"
          :key="index"
          :label="item.label"
          :min-width="item.minWidth"
          :align="item.align"
          :show-overflow-tooltip="item.showOverflowTooltip"
          :fixed="item.fixed"
        >
          <template v-if="item.type === 'level'" #default="scope">
            <px-tag style="color: #fff" round :color="tagBgColorList[scope.row.alarmLevel]"> {{ scope.row.alarmLevel }} </px-tag>
          </template>
          <template v-else-if="item.type === 'pos'" #default="scope">
            <px-button type="primary" link icon="location" @click="handleVisual(scope.row)">
              <span style="color: #67b2ff" @click="handleVisual(scope.row)">{{ scope.row.twinName }}</span>
            </px-button>
          </template>
          <template v-else #default="scope">
            {{ scope.row[item.prop] === 0 ? scope.row[item.prop] : scope.row[item.prop] ? scope.row[item.prop] : "-" }}
          </template>
        </px-table-column>
        <px-table-column label="操作" align="center" fixed="right">
          <template #default="scope">
            <px-tooltip content="运行台账" placement="top">
              <px-button link type="primary" icon="Tickets" @click="handleToEqp(scope.row)" />
            </px-tooltip>
          </template>
        </px-table-column>
      </px-table>
      <pagination
        v-show="total > 0"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        :total="total"
        @pagination="queryTable"
      />
    </px-scrollbar>
  </px-dialog>
</template>

<script setup lang="ts">
import { queryById } from "@/api/alert";
import dayjs from "dayjs";
import { PxMessage } from "px-ui";
import { reactive, toRefs, watch, computed } from "vue";
import { useRouter } from "vue-router";

const router = useRouter();

const faultVisible = defineModel("faultVisible");
const props = defineProps(["dateType", "alarmType", "className", "startTime", "endTime"]);

const state = reactive<any>({
  tableData: [],
  queryParams: {
    pageNum: 1,
    pageSize: 20
  },
  total: 0,
  tableColumns: [
    { prop: "alarmTime", label: "发生时间", minWidth: "160", showOverflowTooltip: true },
    { prop: "alarmLevel", label: "级别", minWidth: "120", type: "level", showOverflowTooltip: true, fixed: "left" },
    { prop: "point", label: "报警点位", minWidth: "160", showOverflowTooltip: true },
    { prop: "systemName", label: "系统", minWidth: "160", showOverflowTooltip: true },
    { prop: "position", label: "位置", minWidth: "150", type: "pos", showOverflowTooltip: true }
    // { prop: "realityValue", label: "实际值", minWidth: "100", showOverflowTooltip: true },
    // { prop: "settingValue", label: "设定值", minWidth: "100", showOverflowTooltip: true }
  ]
});
const { tableData, tableColumns, queryParams, total } = toRefs(state);

const tagBgColorList = {
  一级报警: "#E02B2B",
  二级报警: "#FF771E",
  三级报警: "#F1B11A",
  四级报警: "#4A9BFF"
};

const params = computed(() => {
  const params = {
    ...queryParams.value,
    alarmStatus: ["ACK", "ON", "OFF"],
    alarmType: props.alarmType,
    className: props.className,
    alarmCenterFlag: "YES",
  };
  if (props.dateType === "other") {
    params.startTime = props.startTime;
    params.endTime = props.endTime;
  } else {
    params.startTime = dayjs().subtract(1, props.dateType).format("YYYY-MM-DD HH:mm:ss");
    params.endTime = dayjs().format("YYYY-MM-DD HH:mm:ss");
  }
  return params;
});

const queryTable = async () => {
  const data = await queryById(params.value);
  tableData.value = data?.data;
  total.value = data?.total;
};

// 进入页面获取table信息
watch(
  () => faultVisible.value,
  async val => {
    if (val) {
      queryTable();
    }
  }
);

const handleCancel = () => {
  faultVisible.value = false;
};

const handleVisual = row => {
  let { twinId } = row;
  if (twinId) {
    router.push({
      path: "/all/visual/template",
      query: {
        compEmitData: twinId
      }
    });
  } else {
    PxMessage.info("因报警数据尚在梳理补全中，会存在报警点跟位置未绑定的情况，此类数据还不能跳转至可视化，待数据完善~");
  }
};

const handleToEqp = row => {
  router.push(`/all/equip/runManage/status?id=${row.twinId}`);
};
</script>
